<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <div class="cil__condition-switch-block" [class.active]="ifGiveReport">
    <div class="cil__condition-switch-block--label" [class.active]="ifGiveReport">{{'BIZ.ACQUIRER.OTHER.SETTLEMENT.PROVIDE_REPORT' | i18n}}</div>
    <nz-switch [(ngModel)]="ifGiveReport" (ngModelChange)="handleIfGiveReportChange($event)"></nz-switch>
  </div>

  <form *ngIf="ifGiveReport" class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'BIZ.ACQUIRER.OTHER.SETTLEMENT.EXISTS_REPORTS' | i18n}}</nz-form-label>
          <nz-form-control>
            <nz-select
              nzMode="multiple"
              formControlName="reportList"
              name="reportList"
            >
              <nz-option
                *ngFor="let item of reportTypeOptions"
                [nzLabel]="item.label"
                [nzValue]="item.value"
              ></nz-option>
            </nz-select>
            <nz-form-explain *ngIf="validateForm.get('reportList').dirty && validateForm.get('reportList').errors">
              <ng-container>{{'VALIDATION.REQUIRED_SELECT' | i18nParams: {name: 'GENERAL.INFO.REPORT'} | lowercase }}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <ng-container *ngFor="let item of formItems; let i=index;" >
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>{{item.label}}</nz-form-label>
            <nz-form-control nzHasFeedback="true">
              <input nz-input [formControlName]="item.formControlName" [name]="item.formControlName" />
              <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty && validateForm.get(item.formControlName).errors">
                <ng-container>{{item.errTip}}</ng-container>
              </nz-form-explain>
            </nz-form-control> 
          </nz-form-item>
        </div>
      </ng-container>
      
    </div>
  </form>

  <nz-divider nzDashed="true"></nz-divider>

  <ng-container *ngFor="">

  </ng-container>

</div>